<template>
  <div>
    <Row>
      <Col :xs="{span: 24 }" :sm="{span: 10}" :md="{span: 6}" :lg="{span: 24}">
      <Menu mode="horizontal" :theme="theme1" @on-select="onMenuSelect">
        <Submenu name="product" style="margin-left: 40px">
          <template slot="title">
            <Icon type="ios-stats" />
            产品中心
          </template>
          <MenuGroup v-for="(item) in subjectList" :title="item.title">
            <MenuItem v-for="product in item.classesEntityList" :name="product.id">{{product.context}}</MenuItem>
          </MenuGroup>
        </Submenu>
        <Submenu name="company">
          <template slot="title">
            <Icon type="ios-stats" />
            关于我们
          </template>
          <MenuGroup title="公司介绍">
            <MenuItem name="4-1">公司简介</MenuItem>
            <MenuItem name="4-2">人才招聘</MenuItem>
          </MenuGroup>
        </Submenu>
      </Menu>
      </Col>+
    </Row>
    <br>
    <Row >
      <Col :xs="{span: 9,offset: 2 }" :sm="{span: 6 ,offset: 1}" :md="{span: 9 ,offset: 3}" :lg="{span: 8 ,offset: 3}" v-for="(item,index) in goods">
        <img :src="item.defaultImgUrl" width="100%" height="100%" @click="onGoodsClick(item.id)"/>
        {{item.title}}
      </Col>
      <Col :xs="{span: 10 , offset: 6}" :sm="{span: 18 ,offset: 1}" :md="{span: 18 ,offset: 3}" :lg="{span: 18 ,offset: 3}">
        <Page @on-change="pageChange" :current="page" :total="total" simple/>
      </Col>
    </Row>
  </div>
</template>
<script>
  import {getGoods} from '@/request/goodsRequest'
  import {getCategoryList} from '@/request/categoryRequest'

  export default {
    data() {
      return {
        goods:[],
        imgUrl: [],
        page: 1,
        size: 10,
        total: 0,
        subjectList: [],
        theme1: 'dark',
        categoryPage: 1,
        categoryPageSize: 10,
        menuSelected: 0,
      }
    },
    activated() {

    },
    created() {
      this.getDataList(),
      this.getCategoryList()
    },
    methods: {
      getDataList(){
        getGoods(this.menuSelected,this.page,this.size).then( res =>{
          this.goods = res.data.data.content;
          this.total = Number(res.data.data.total);
        });

      },
      getCategoryList(){
        getCategoryList(this.categoryPage,this.categoryPageSize).then( res =>{
          this.subjectList = res.data.data;
        });
      },
      pageChange(current){
        this.page = current;
        this.getDataList();
      },
      onMenuSelect(name){
        this.page = 1;
        this.menuSelected = name;
        this.getDataList();
      },
      onGoodsClick(goodsId){
        this.$router.push({name: 'goodsInfo', query: {id: goodsId}});
      },

    }
  }
</script>
